<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
        <el-row :gutter="35">
          <el-col :span="7">
            <el-input placeholder="请输入酒店名:" v-model="queryInfo.query" clearable @clear="getOrderList()">
              <el-button slot="append" icon="el-icon-search" @click="getOrder()"></el-button>
            </el-input>
        </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="openForm">预定</el-button>
          </el-col>
        </el-row>
         <el-table
            :data="orderList"
            style="width: 100%"

            stripe
            >
            <el-table-column
              prop="id"
              label="订单id"
              width="60">
            </el-table-column>
            <el-table-column
              prop="createdate"
              label="预定时间"
              width="152">
            </el-table-column>
            <el-table-column
              prop="orderuser"
              label="预订人"
              >
            </el-table-column>
            <el-table-column
              prop="orderhotel"
              label="预定酒店">
            </el-table-column>
            <el-table-column
              prop="roomcode"
              label="房间号">
            </el-table-column>
            <el-table-column
              prop="indate"
              label="入住日期"
              width="152">
            </el-table-column>
            <el-table-column
              prop="outdate"
              label="离店日期"
              width="152">
            </el-table-column>
            <el-table-column
              prop="orderprice"
              label="单价">
            </el-table-column>
            <el-table-column
              prop="ordercompany"
              label="预定单位">
            </el-table-column>
            <el-table-column
              prop="ordernumber"
              label="预定数量">
            </el-table-column>
            <el-table-column
              prop="roomstate"
              label="订单状态">
              <template slot-scope="scope">
               <el-tag type="warning" v-if="scope.row.roomstate=== 2">未入住</el-tag>
               <el-tag type="info" v-else-if="scope.row.roomstate=== 0">已退房</el-tag>
               <el-tag type="info" v-else-if="scope.row.roomstate=== 1">已退房</el-tag>
               <el-tag type="primary" v-else-if="scope.row.roomstate=== 3">正在住</el-tag>
               <el-tag type="danger" v-else-if="scope.row.roomstate=== 4">未审核</el-tag>
               <el-tag type="danger" v-else-if="scope.row.roomstate=== 5">已拒绝</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="success" icon="el-icon-search" size="mini" @click="getNow(scope.row.id)">查看</el-button>
                <el-button type="danger" icon="el-icon-unlock" size="mini" @click="updateState(scope.row.roomcode,scope.row.orderhotel)">退房</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.queryInfo.pagenum"
            :page-sizes="[1, 2, 3, 5, 10]"
            :page-size="this.queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>

          <!--  添加订单-->
              <el-dialog
                title="添加订单"
                :visible.sync="addDialogVisible"
                width="50%"
                @close="addDialogClose">
                <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
                  <el-form-item label="预定人" prop="orderuser">
                    <el-input v-model="addForm.orderuser"></el-input>
                  </el-form-item>
                  <el-form-item label="预定酒店">
                    <template slot-scope="scope">
                      <el-select v-model="addForm.orderhotel" placeholder="请选择酒店" clearable  @change="getTypes">
                        <el-option
                          v-for="item in hotels"
                          :key="item.id"
                          :label="item.hotelname"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </template>
                  </el-form-item>
                  <el-form-item label="房间类型" prop="roomtype">
                      <el-select
                       v-model="addForm.roomtype"
                       clearable  placeholder="请选择房型" @change="getRooms" >
                        <el-option
                          v-for="item in types"
                          :key="item.id"
                          :label="item.typename"
                          :value="item.id">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="房间号" prop="roomcode">
                      <el-select v-model="addForm.roomcode" placeholder="请选择房间" clearable >
                        <el-option
                          v-for="item in rooms"
                          :key="item.roomcode"
                          :label="item.roomcode"
                          :value="item.roomcode">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="入住日期" prop="indate">
                        <div class="block">
                          <el-date-picker
                            v-model="addForm.indate"
                            type="datetime"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd HH:mm:ss">
                          </el-date-picker>
                        </div>
                  </el-form-item>
                  <el-form-item label="离店日期" prop="outdate">
                    <div class="block">
                      <el-date-picker
                        v-model="addForm.outdate"
                        type="datetime"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd HH:mm:ss">
                      </el-date-picker>
                    </div>
                  </el-form-item>
                  <el-form-item label="预定单位" prop="ordercompany">
                    <el-input v-model="addForm.ordercompany" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="预定数量" prop="ordernumber">
                    <el-input v-model.number="addForm.ordernumber" disabled></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="addDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="reserveOrder">确 定</el-button>
                </span>
              </el-dialog>
              <!-- 查看当前订单 -->
              <el-dialog
                title="查看详情"
                :visible.sync="updateDialogVisible"
                width="50%"
                @close="updateDialogClose">
                <el-form :model="nowForm" ref="nowFormRef" label-width="100px">
                  <el-form-item label="预定人" prop="orderuser">
                    <el-input v-model="nowForm.orderuser" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="预定酒店" prop="orderhotel">
                    <el-input v-model="nowForm.orderhotel" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="房间号" prop="roomcode">
                    <el-input v-model.number="nowForm.roomcode" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="入住日期" prop="indate">
                        <div class="block">
                          <el-date-picker
                            v-model="nowForm.indate"
                            type="datetime"
                            placeholder="选择日期" disabled>
                          </el-date-picker>
                        </div>
                  </el-form-item>
                  <el-form-item label="离店日期" prop="outdate">
                    <div class="block">
                      <el-date-picker
                        v-model="nowForm.outdate"
                        type="datetime"
                        placeholder="选择日期" disabled>
                      </el-date-picker>
                    </div>
                  </el-form-item>
                  <el-form-item label="单价" prop="orderprice">
                    <el-input v-model.number="nowForm.orderprice" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="预定单位" prop="ordercompany">
                    <el-input v-model="nowForm.ordercompany" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="预定数量" prop="ordernumber">
                    <el-input v-model.number="nowForm.ordernumber" disabled></el-input>
                  </el-form-item>
                </el-form>
              </el-dialog>
    </el-card>
  </div>
</template>

<script>
  export default{
    name:'Order',
    data(){
      return{
        queryInfo : {
          query:'',
          pagenum:1,
          pagesize:2
        },
        hotels:[],
        rooms:[],
        types:[],
        orderList:[],
        value:'',
        nowForm:[],
        total:null,
        updateDialogVisible:false,
        addDialogVisible:false,
        addForm:{
          createdate:null,
          orderuser:'',
          orderhotel:'',
          roomtype:'',
          roomcode:null,
          indate:null,
          outdate:null,
          orderprice:100,
          ordercompany:'间',
          ordernumber:1
        },
        addFormRules:{
          orderuser:[
            {required:true, message:'请输入用户名', trigger:'blur'},
            {min:1, max:10,message:'长度在1到10个字符',trigger:'blur'}
          ],
          orderhotel:[
            {required:true, message:'请输入酒店名',trigger:'blur'},
            {min:0,max:10,message:'长度在0到10个字符',trigger:'blur'}
          ],
          roomcode:[
            {required:true, message:'请输入房间号', trigger:'blur'},
            {type:'number',min:1, max:1000,message:'长度在1到10个字符',trigger:'blur'}
          ],
          indate:[
            {required:true, message:'请输入入住时间', trigger:'blur'},
            // {min:0, max:20,message:'长度在0到20个字符',trigger:'blur'}
          ],
          outdate:[
            {required:true, message:'请输入离店时间', trigger:'blur'},
            // {min:1, max:20,message:'长度在1到20个字符',trigger:'blur'}
          ],
          orderprice:[
            {required:true, message:'请输入预定单位', trigger:'blur'},
            {type:'number',min:1, max:1000,message:'长度在1到1000个字符',trigger:'blur'}
          ],
          ordercompany:[
            {required:true, message:'请输入预定单位', trigger:'blur'},
            {min:1, max:2,message:'长度在1到2个字符',trigger:'blur'}
          ],
          ordernumber:[
            {required:true, message:'请输入预定数量', trigger:'blur'},
            {type:'number',min:0, max:5,message:'长度在1到5个字符',trigger:'blur'}
          ]
        },
      }
    },
    created(){
      this.getOrderList(),
      this.reseHotel()
    },
    methods:{
      getOrderList() {
        const usercode = window.sessionStorage.getItem('token')
        const that = this
        // console.log(usercode)
        this.axios.get('http://localhost:8090/order/getLoginOrder/'+usercode+'/'+that.queryInfo.pagenum+'/'+that.queryInfo.pagesize).then(res=>{
          that.orderList = res.data.records
          that.total = res.data.total
          that.queryInfo.pagesize=res.data.size
          that.queryInfo.pagenum=res.data.current
          // console.log(res.data)
          // console.log(this.queryInfo.pagenum+''+this.queryInfo.pagesize)
        })
      },
      handleSizeChange(newSize){
        const that = this
        that.queryInfo.pagesize = newSize
        that.getOrderList()
      },
      handleCurrentChange(newPage){
        const that = this
        that.queryInfo.pagenum = newPage
        that.getOrderList()
      },
      async getOrder(){
        const usercode = window.sessionStorage.getItem('token')
        const {data:res} = await this.axios.get('http://localhost:8090/order/list/'+usercode+'/'+this.queryInfo.query+'/'+this.queryInfo.pagenum+'/'+this.queryInfo.pagesize)
        this.orderList = res.records
        this.total = res.total
        this.queryInfo.pagesize=res.size
        this.queryInfo.pagenum=res.current
      },
      addDialogClose(){
        this.$refs.addFormRef.resetFields()
      },
      updateDialogClose(){
        this.$refs.addFormRef.resetFields()
      },
      reserveOrder(){
        this.axios.post('http://localhost:8090/order/reserveOrder',this.addForm).then(res=>{
          if(res.data){
            this.getOrderList()
            this.$message.success('订单已提交!')
            this.addDialogVisible = false
          }
        })
      },
      async updateState(roomcode,orderhotel){
        // console.log(roomcode+''+orderhotel)
                const confirmsg = await this.$confirm('是否退房', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).catch(err => {
                  return err
                })
                // console.log(confirmsg)
                if(confirmsg != 'confirm'){
                  return this.$message.info('取消退房!')
                }
                else{
                  this.axios.get('http://localhost:8090/order/updateStatus/'+roomcode+'/'+orderhotel).then(res=>{
                    // console.log(res.data)
                    if(res.data) {
                      this.getOrderList()
                      this.$message.success('退房成功!')
                    }
                  })
                }
      },
      getNow(id){
        this.updateDialogVisible = true
        this.axios.get('http://localhost:8090/order/getNow/'+id).then(res=>{
          this.nowForm = res.data
        })
      },
      openForm(){
        this.addDialogVisible = true
      },
      async reseHotel(){
        const that = this
        const {data:res} = await this.axios.get("http://localhost:8090/hotel/getHotels")
          that.hotels = res
      },
      async getTypes(){
        const that = this
        console.log(that.addForm.roomtype)
        const {data:res} = await this.axios.get("http://localhost:8090/type/getTypes/"+that.addForm.orderhotel)
        that.types = res
        // console.log(that.types)
      },
      async getRooms(){
        const that = this
        // console.log(that.addForm.roomcode)
        const {data:res} = await this.axios.get("http://localhost:8090/room/getRooms/"+that.addForm.orderhotel+'/'+that.addForm.roomtype)
        that.rooms = res
        console.log(that.types)
      }
    }
  }
</script>

<style>
</style>
